//设置点击搜索事件
var sousuobt = document.querySelector('.sousuobt');
var inputEle = document.querySelector('.sousuoin');
sousuobt.onclick = () => {
    axios.get('/user/search', { params: { searchkey: inputEle.value } }).then((res) => {
        render(res.data.list)
    })
}


//获取存储在localStorage中的用户信息   並且將其渲染到首页
var userinfo = JSON.parse( localStorage.getItem('userinfo') );
document.querySelector('.username').innerHTML = userinfo.name;


//設置刪除事件，因为将其挨个绑定到每个渲染出的数据的  删除  中比较费劲，所以运用事件委托
//绑定点击事件到每个  删除  的标签的共同的父元素上  即（事件委托）
var tbody = document.querySelector('tbody');
tbody.onclick = (e)=>{
    //用e.target确定当前点击的是哪个  删除   ，并且要精准判断是否是 删除的那个span标签
    if( e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu') ){
        //观察知手机号有唯一性，即可给每个绑定上手机号，通过获取手机号向后端发送删除这个手机号的请求
        axios.post('/user/delete',{ phone: e.target.dataset.phone }).then((res)=>{
            //删除成功只是在后端数据中删除了，要再次请求删除后的数据并且重新渲染
            render(res.data.list)
        })
    }
}

//渲染列表
function render(data) {
    var str = ''
    str = data.map((item, index) => {
        return `<tr>
                    <td>${item.email}</td> 
                    <td>${item.name}</td>
                    <td>${item.phone}</td>
                    <td>${item.ingroup}</td>
                    <td>${item.isadmin ? '是' : '否'}</td>
                    <td> <span  class="zhuangtaise">${item.zhuangtai}</span></td>
                    <td class="caozuo">
                        <span class="iconfont icon-bianji"></span>
                        <span class="iconfont icon-shanchu" data-phone="${item.phone}"></span>
                    </td>
                </tr>`
    }).join('')

    if (str == '') {
        str = '<div style="text-align:center;color:red">未查询到数据!</div>'
    }
    document.querySelector('tbody').innerHTML = str;
    //渲染状态的背景色
    var zhuangtaise = document.querySelectorAll('.zhuangtaise')
    for (let i = 0; i < zhuangtaise.length; i++) {
        if (zhuangtaise[i].innerText == '正常') {
            zhuangtaise[i].classList.add('green')
        }
        else {
            zhuangtaise[i].classList.add('red')
        }
    }
}



//get请求
axios.get('/user/list', { params: { page: 1, count: 10 } }).then((res) => {
    render(res.data.list)
    console.log(res.data);
})
//post请求
axios.post('/user/denglu').then((res) => {
    console.log(res.data);
})
